import { Swiper, SwiperItem, Image } from '@tarojs/components'
import './index.scss'

interface BannerSwiperProps {
  images: { id: number | string; imageUrl: string }[]
  height?: string | number // 支持自定义高度
  radius?: string | number // 支持自定义圆角
}

export default function BannerSwiper({ images, height = 200, radius = 16 }: BannerSwiperProps) {
  return (
    <Swiper
      className='banner-swiper'
      indicatorColor='#999'
      indicatorActiveColor='#ff6b00'
      circular
      indicatorDots
      autoplay
      style={{ height: typeof height === 'number' ? `${height}px` : height }}
    >
      {images.map(banner => (
        <SwiperItem key={banner.id}>
          <Image
            className='banner-swiper__image'
            src={banner.imageUrl}
            mode='aspectFill'
            style={{
              borderRadius: typeof radius === 'number' ? `${radius}px` : radius,
              height: '100%',
              width: '100%'
            }}
          />
        </SwiperItem>
      ))}
    </Swiper>
  )
} 